<!DOCTYPE html>
<html>
{% block head %} {% include "components/head.html" %} {% endblock %}

<body>
  {% include "components/navbar.html" %}

  <main>
    <div class="container">
      {% include 'components/alerts.html' %}
      <div class="row">
        <div class="col">
          <h1>Installed {{ data.type }} images</h1>
          <br />
          {% if data.command == [] %}
          <p>No {{ data.type }} images available.</p>
          {% else %}
          <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered">
              <caption>
                List of installed {{ data.type }} images
              </caption>
              <thead class="thead-dark">
                <tr>
                  <th class="align-middle text-center">#</th>
                  <th>Name</th>
                </tr>
              </thead>
              <tbody>
                {% for value in data.command %}
                <tr>
                  <td class="align-middle text-center">{{loop.index}}</td>
                  <td class="align-middle">{{value.name}}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </main>
  {% include 'components/footer.html' %}
</body>

</html>